import {Component} from 'react'
import Taro from '@tarojs/taro'
import {View, Text} from '@tarojs/components'
import 'taro-ui/dist/style/index.scss'
import { AtDivider } from 'taro-ui'
import {
  AtButton,
  AtSearchBar,
  AtIcon,
  AtList,
  AtListItem,
  AtCalendar,
  AtTabs,
  AtTabsPane,
  AtTabBar
} from 'taro-ui'

import "taro-ui/dist/style/components/button.scss" // 按需引入
import '../index/index.less'
import './appointment.less'

export default class AppointmentMoreInfo extends Component {
  state = {
    value: "",
    current: 0,
    dateSel: ''
  }

  /*搜索*/
  onSearch(value) {
    this.setState({
      value: value
    })
  }

  onActionClick() {
    console.log('开始搜索')
  }

  /*页面切换*/
  handleClick(value) {
    this.setState({
      current: value
    })
  }


  render() {
    var tabList = [{title: "首页", iconType: "home"}, {title: "我的", iconType: "user"}]
    return (
      <View className='appointment'>
        <AtTabBar
          fixed
          tabList={tabList}
          onClick={this.handleClick.bind(this)}
          current={this.state.current}
        />
        <AtTabs current={this.state.current} onClick={this.handleClick.bind(this)}>
          <AtTabsPane current={this.state.current} index={0}>
            <View style='padding: 10px 0px;background-color: #FAFBFC;text-align: center;'>
              <AtSearchBar
                actionName='搜索'
                value={this.state.value}
                onChange={this.onSearch.bind(this)}
                onActionClick={this.onActionClick.bind(this)}
              />
              <AtIcon value='check-circle'></AtIcon>
              <View>
                <Text>恭喜您，挂号成功！</Text>
              </View>
              <AtDivider/>
              <Text>挂号信息</Text>
              {/*卡片开始*/}
              <View className='my-card-second'>
                <View className='my-info-second'>
                  <Text className='my-info-title'>就诊机构：</Text>
                  <Text>xxxxxxxx</Text>
                </View>
                <View className='my-info-second'>
                  <Text className='my-info-title'>就诊科室：</Text>
                  <Text>xxxxxxxx</Text>
                </View>
                <View className='my-info-second'>
                  <View className='my-info-left-second'>
                    <View>
                      <Text className='my-info-title'>就诊医师：</Text>
                      <Text>xxxxxxxx</Text>
                    </View>
                    <View>
                      <Text className='my-info-title'>挂号号别：</Text>
                      <Text>xxxxxxxx</Text>
                    </View>
                  </View>
                  <View className='my-info-right-second'>
                    <View>号码</View>
                  </View>
                </View>
                <View className='my-info-second'>
                  <Text className='my-info-title'>就诊时间：</Text>
                  <Text>xxxxx</Text>
                </View>
                <View className='my-info-second'>
                  <Text className='my-info-title'>就诊患者：</Text>
                  <Text>xxxxx</Text>
                </View>
                <View className='my-info-second'>
                  <Text className='my-info-title'>身份证号：</Text>
                  <Text>xxxxx</Text>
                </View>
                <View className='my-info-second'>
                  <Text className='my-info-title'>手机号码：</Text>
                  <Text>xxxxx</Text>
                </View>
              </View>
              {/*卡片结束*/}

            </View>
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={1}>
            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页二的内容</View>
          </AtTabsPane>
        </AtTabs>
      </
        View>
    )
  }
}
